@each $item in 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,25,30,40,50,60,70,80,90 {
  .p$(item) {
    padding: calc($(item) * var(--change_base)) !important;
  }
  .pt$(item) {
    padding-top: calc($(item) * var(--change_base)) !important;
  }
  .pr$(item) {
    padding-right: calc($(item) * var(--change_base)) !important;
  }

  .pb$(item) {
    padding-bottom: calc($(item) * var(--change_base)) !important;
  }

  .pl$(item) {
    padding-left: calc($(item) * var(--change_base)) !important;
  }

  .prl$(item) {
    padding-right: calc($(item) * var(--change_base)) !important;
    padding-left: calc($(item) * var(--change_base)) !important;
  }

  .pbt$(item) {
    padding-bottom: calc($(item) * var(--change_base)) !important;
    padding-top: calc($(item) * var(--change_base)) !important;
  }

  .m$(item) {
    margin: calc($(item) * var(--change_base)) !important;
  }

  .mt$(item) {
    margin-top: calc($(item) * var(--change_base)) !important;
  }

  .mr$(item) {
    margin-right: calc($(item) * var(--change_base)) !important;
  }

  .mb$(item) {
    margin-bottom: calc($(item) * var(--change_base)) !important;
  }

  .ml$(item) {
    margin-left: calc($(item) * var(--change_base)) !important;
  }

  .mrl$(item) {
    margin-right: calc($(item) * var(--change_base)) !important;
    margin-left: calc($(item) * var(--change_base)) !important;
  }

  .mbt$(item) {
    margin-bottom: calc($(item) * var(--change_base)) !important;
    margin-top: calc($(item) * var(--change_base)) !important;
  }


  .pt$(item)vh {
    padding-top: $(item)vh;
  }

  .pb$(item)vh {
    padding-bottom: $(item)vh;
  }

  .pbt$(item)vh {
    padding-bottom: $(item)vh;
    padding-top: $(item)vh;
  }

  .mt$(item)vh {
    margin-top: $(item)vh;
  }

  .mb$(item)vh {
    margin-bottom: $(item)vh;
  }

  .mbt$(item)vh {
    margin-bottom: $(item)vh;
    margin-top: $(item)vh;
  }
}


